<template>
    <view class="Use auto m-top24">
        <view class="Use-Slect">
            <titleBox title="立即使用"></titleBox>
            <view class="Use-Slect-box">
                <view class="SlectLi" @click="current = item.value" v-for="(item, index) in delivery" :key="index">
                    <view class="SlectLi_box" :class="{ Active: current == item.value }">
                        <view class="iconfont icon-xuanzhong white size28"></view>
                    </view>
                    <text class="black size28">{{ item.title }}</text>
                </view>
            </view>
        </view>

        <block v-for="(item, index) in delivery" :key="index">
            <view class="Address" v-if="item.value == 1 && current == 1">
                <text class="color_33 size28">收货地址</text>
                <view class="Address-default" v-if="address" @click="showAddress = true">
                    <!-- <image :src="headImg" mode="aspectFill" class="headImg"></image> -->
                    <view class="flex-1 d-flex f-column m-right10">
                        <text class="ellipsis color_33 h6">{{ address.Aaddress }}</text>
                        <text class="black size30 bold">{{ address.Aregion }}</text>
                        <view class="d-flex a-center">
                            <text class="color_33 h6">{{ address.Aname }}</text>
                            <text class="color_33 h6 m-left20">{{ address.Amobile }}</text>
                        </view>
                    </view>
                    <view class="iconfont icon-xiangyouxiayiye color_33 size28"></view>
                </view>
                <view class="row f-column a-center pading20" v-else @click="showAddress = true">
                    <view class="iconfont icon-tianjia color_cc size100 m-top30"></view>
                    <text class="color_cc size26 m-top20">选择地址</text>
                </view>

                <view class="Address-Shop">
                    <text class="color_33 size28">配送门店</text>
                    <view class="toggleShop" @click.stop="switchStore">切换门店</view>
                </view>
                <view class="defaulShop">
                    <text class="flex-1 black size30">{{ shops_info.name }}</text>
                    <text class="color_99 size26" v-if="shops_info.distance">{{ shops_info.distance }}</text>
                </view>
                <view class="defaulShop">
                    <text class="flex-1 color_99 size26">{{ shops_info.address }}</text>
                    <view class="navigation" @click.stop="openStore(shops_info)">
                        <view class="iconfont icon-wodeluxian color_33 h6s"></view>
                    </view>
                </view>
                <view class="createOrder" @click.stop="createOrder" v-if="express_fee && express_fee > 0">配送费 ￥{{ express_fee }}</view>
                <view class="createOrder" @click.stop="createOrder" v-else>生成订单</view>
            </view>

            <view class="Code" v-if="item.value == 2 && current == 2">
                <text class="color_99 size26">请店员使用商户端扫码付款</text>
                <image :src="$imgUrls(qr)" class="Code-Img"></image>
                <text class="color_33 size34 m-top20">{{ use_code }}</text>
            </view>
        </block>

        <Address :Address="address" v-if="showAddress" @close="showAddress = false" @Update="UpdateAddress"></Address>
    </view>
</template>

<script>
    import titleBox from '@/subCard/components/titleBox.vue';
    import Address from './Address.vue';
    export default {
        props: ['qr', 'use_code', 'item_id', 'cardid', 'shop_id', 'delivery'],
        components: {
            titleBox,
            Address
        },
        data() {
            return {
                showAddress: false,
                deliverys: [
                    {
                        title: '门店自提'
                    },
                    {
                        title: '快递上门'
                    }
                ],
                current: 1, // 1 快递 2 自提
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',

                address_id: '',
                address: '',
                shops_info: '',
                express_fee: ''
            };
        },
        watch: {
            delivery: {
                deep: true,
                immediate: true,
                handler(newVal) {
                    if (!newVal) return;
                    if (newVal && newVal.length == 1) {
                        this.current = newVal[0].value;
                    }
                }
            }
        },
        created() {
            this.getDeliveryInfo();
        },
        methods: {
            getDeliveryInfo() {
                this.$http
                    .get({
                        url: '/TimeCardApi/getDeliveryInfo',
                        data: {
                            item_id: this.item_id,
                            shop_id: this.shop_id,
                            address_id: this.address_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.shops_info = result.shops_info;
                        this.express_fee = result.express_fee;
                        if (result.address) {
                            this.address = result.address;
                            this.address_id = result.address.id;
                        }
                    });
            },
            UpdateAddress(e) {
                this.address_id = e;
                this.getDeliveryInfo();
            },
            openStore(Item) {
                if (!Item.pointx || !Item.pointy) return;
                const obj = {
                    s_latitude: Item.pointx,
                    s_longitude: Item.pointy,
                    name: Item.name,
                    nameAdress: Item.address
                };
                this.$pop.openLocation(obj);
            },
            switchStore() {
                this.toUrl(`/subCard/selectStore?id=${this.cardid}`);
            },
            createOrder() {
                this.$http
                    .post({
                        url: '/TimeCardApi/useCardItem',
                        data: {
                            shop_id: this.shops_info.shop_id,
                            address_id: this.address_id,
                            use_code: this.use_code,
                            express_fee: this.express_fee, // 快递费
                            delivery: 1
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        if (!res.data) return this.$emit('getDetail');
                        const result = res.data;
                        if (result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: result.appId,
                                extraData: result.extraData
                            });
                        } else {
                            uni.getProvider({
                                service: 'oauth',
                                success: function (resp) {
                                    if (resp.provider) {
                                        uni.requestPayment({
                                            provider: resp.provider[0],
                                            orderInfo: result,
                                            timeStamp: result.timeStamp,
                                            nonceStr: result.nonceStr,
                                            package: result.package,
                                            signType: result.signType,
                                            paySign: result.paySign,
                                            success: (resj) => {
                                                this.getDeliveryInfo();
                                            },
                                            fail: (err) => {
                                                this.getDeliveryInfo();
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Use {
        width: 690rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        padding: 36rpx 20rpx 30rpx;

        &-Slect {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        &-Slect-box {
            display: flex;
            align-items: center;

            .SlectLi {
                display: flex;
                align-items: center;
                margin-left: 20rpx;

                .SlectLi_box {
                    width: 34rpx;
                    height: 34rpx;
                    border: 1rpx solid #d2d2d2;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10rpx;
                }

                .Active {
                    background-color: var(--color);
                    border: 1rpx solid var(--color);
                }
            }
        }

        .Code {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 30rpx;

            &-Img {
                width: 360rpx;
                height: 360rpx;
                margin-top: 24rpx;
                display: block;
            }
        }

        .Address {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 30rpx;

            &-default {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 24rpx;

                .headImg {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }

            &-Shop {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 30rpx;

                .toggleShop {
                    padding: 4rpx 20rpx;
                    background-color: var(--color);
                    color: #ffffff;
                    font-size: 26rpx;
                    border-radius: 30rpx;
                }
            }

            .defaulShop {
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 20rpx;

                .navigation {
                    width: 40rpx;
                    height: 40rpx;
                    background-color: #f8f8f8;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }

            .createOrder {
                width: 340rpx;
                height: 76rpx;
                border: 1rpx solid var(--color);
                margin: 30rpx auto 10rpx;
                border-radius: 10rpx;
                color: var(--color);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
        }
    }
</style>
